// 功能模块页面
import Navbar from '../components/Navbar.js';
import Footer from '../components/Footer.js';
import { navigateTo } from '../router/index.js';

function Features() {
  const featuresPage = document.createElement('div');
  featuresPage.className = 'min-h-screen flex flex-col';
  
  // 创建导航栏
  const navbar = Navbar();
  featuresPage.appendChild(navbar);
  
  // 页面内容
  const contentContainer = document.createElement('div');
  contentContainer.className = 'flex-grow';
  contentContainer.innerHTML = `
    
    <!-- 页面标题区 -->
    <section class="bg-gradient-to-br from-blue-50 to-indigo-50 section-padding">
      <div class="container mx-auto px-4 md:px-8 text-center">
        <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-dark mb-4">核心功能模块</h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          MSRM3提供全方位的网络管理功能，从拓扑发现到数据监控，从设备管理到安全防护，满足各类网络环境需求
        </p>
      </div>
    </section>
    
    <!-- 功能模块列表 -->
    <section class="section-padding bg-white">
      <div class="container mx-auto px-4 md:px-8">
        <!-- 功能模块选项卡 -->
        <div class="flex flex-wrap justify-center gap-4 mb-12">
          <button class="feature-tab active" data-tab="topology">拓扑管理</button>
          <button class="feature-tab" data-tab="data">数据管理</button>
          <button class="feature-tab" data-tab="network">网络工具</button>
          <button class="feature-tab" data-tab="security">安全防护</button>
          <button class="feature-tab" data-tab="monitor">监控告警</button>
          <button class="feature-tab" data-tab="system">系统设置</button>
        </div>
        
        <!-- 拓扑管理内容 -->
        <div id="topology-content" class="feature-content active">
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
            <div class="space-y-6">
              <h2 class="text-2xl md:text-3xl font-bold text-primary">智能拓扑发现与管理</h2>
              <p class="text-gray-600">
                自动发现网络中的所有设备，生成完整的网络拓扑图，直观展示网络结构和设备连接关系。支持SNMP协议和Ping扫描两种发现模式，适应不同网络环境。
              </p>
              <ul class="space-y-3">
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>支持自动发现所有IP设备，包括交换机、路由器、服务器、终端设备等</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>矢量拓扑图，可自由拖拽、缩放、布局调整</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>设备图标支持自定义，可区分不同类型设备</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>支持拓扑图导出为图片，便于汇报和文档编写</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>支持多网段扫描和管理，适合复杂网络环境</span>
                </li>
              </ul>
              <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
                <p class="text-blue-700 font-medium">
                  <i class="fa fa-info-circle mr-2"></i>
                  拓扑发现可设置扫描IP范围、扫描间隔，支持保存多个拓扑图方案
                </p>
              </div>
            </div>
            <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100">
              <div class="h-80 bg-gray-50 flex items-center justify-center">
                <div class="text-center">
                  <i class="fa fa-sitemap text-8xl text-primary/70 mb-4"></i>
                  <p class="text-gray-500 text-lg">拓扑管理示意图</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 数据管理内容 -->
        <div id="data-content" class="feature-content hidden">
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
            <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 order-2 lg:order-1">
              <div class="h-80 bg-gray-50 flex items-center justify-center">
                <div class="text-center">
                  <i class="fa fa-database text-8xl text-primary/70 mb-4"></i>
                  <p class="text-gray-500 text-lg">数据管理示意图</p>
                </div>
              </div>
            </div>
            <div class="space-y-6 order-1 lg:order-2">
              <h2 class="text-2xl md:text-3xl font-bold text-primary">高效数据管理与分析</h2>
              <p class="text-gray-600">
                全面采集和管理网络设备数据，包括IP地址、MAC地址、设备信息、端口状态等，并提供强大的排序和筛选功能，快速定位所需信息。
              </p>
              <ul class="space-y-3">
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>IP地址扫描与管理，显示设备在线状态和基本信息</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>MAC地址与IP地址绑定管理，防止IP冲突</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>支持按设备类型、厂商、状态等多种条件筛选</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>所有数据表格支持多列排序，提升查询效率</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>数据导出功能，支持Excel、CSV格式</span>
                </li>
              </ul>
              <div class="bg-green-50 p-4 rounded-lg border border-green-100">
                <p class="text-green-700 font-medium">
                  <i class="fa fa-lightbulb-o mr-2"></i>
                  数据管理模块支持定时自动扫描，保持数据实时更新
                </p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 网络工具内容 -->
        <div id="network-content" class="feature-content hidden">
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
            <div class="space-y-6">
              <h2 class="text-2xl md:text-3xl font-bold text-primary">全能网络工具集</h2>
              <p class="text-gray-600">
                内置多种网络诊断和管理工具，一站式解决网络故障排查和日常维护需求，无需安装多个第三方工具。
              </p>
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div class="p-4 border border-gray-200 rounded-lg hover:shadow-md transition-shadow">
                  <h3 class="font-bold text-lg mb-2 flex items-center">
                    <i class="fa fa-terminal text-primary mr-2"></i>Ping工具
                  </h3>
                  <p class="text-gray-600">快速检测网络连通性，支持批量Ping和持续Ping</p>
                </div>
                <div class="p-4 border border-gray-200 rounded-lg hover:shadow-md transition-shadow">
                  <h3 class="font-bold text-lg mb-2 flex items-center">
                    <i class="fa fa-exchange text-primary mr-2"></i>Traceroute
                  </h3>
                  <p class="text-gray-600">追踪数据包路径，定位网络延迟节点</p>
                </div>
                <div class="p-4 border border-gray-200 rounded-lg hover:shadow-md transition-shadow">
                  <h3 class="font-bold text-lg mb-2 flex items-center">
                    <i class="fa fa-plug text-primary mr-2"></i>端口扫描
                  </h3>
                  <p class="text-gray-600">检测目标设备开放端口，识别网络服务</p>
                </div>
                <div class="p-4 border border-gray-200 rounded-lg hover:shadow-md transition-shadow">
                  <h3 class="font-bold text-lg mb-2 flex items-center">
                    <i class="fa fa-search text-primary mr-2"></i>ARP扫描
                  </h3>
                  <p class="text-gray-600">发现局域网内所有活跃设备，获取MAC信息</p>
                </div>
              </div>
              <div class="bg-purple-50 p-4 rounded-lg border border-purple-100">
                <p class="text-purple-700 font-medium">
                  <i class="fa fa-star mr-2"></i>
                  所有网络工具支持保存历史记录，便于对比分析
                </p>
              </div>
            </div>
            <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100">
              <div class="h-80 bg-gray-50 flex items-center justify-center">
                <div class="text-center">
                  <i class="fa fa-wrench text-8xl text-primary/70 mb-4"></i>
                  <p class="text-gray-500 text-lg">网络工具示意图</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 安全防护内容 -->
        <div id="security-content" class="feature-content hidden">
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
            <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 order-2 lg:order-1">
              <div class="h-80 bg-gray-50 flex items-center justify-center">
                <div class="text-center">
                  <i class="fa fa-shield text-8xl text-primary/70 mb-4"></i>
                  <p class="text-gray-500 text-lg">安全防护示意图</p>
                </div>
              </div>
            </div>
            <div class="space-y-6 order-1 lg:order-2">
              <h2 class="text-2xl md:text-3xl font-bold text-primary">全方位安全防护</h2>
              <p class="text-gray-600">
                提供多层次的网络安全防护功能，包括IP-MAC绑定、端口监控、流量分析等，有效防范网络攻击和非法接入。
              </p>
              <ul class="space-y-3">
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>IP-MAC绑定管理，防止ARP欺骗和IP地址盗用</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>端口安全监控，检测异常端口活动</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>流量异常检测，识别大流量占用和DDoS攻击</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>支持设置安全策略，自动化安全响应</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>内网安全更新功能，无需外网权限也可完成升级</span>
                </li>
              </ul>
              <div class="bg-red-50 p-4 rounded-lg border border-red-100">
                <p class="text-red-700 font-medium">
                  <i class="fa fa-exclamation-circle mr-2"></i>
                  特别提示：结合定期扫描和监控，可有效提升网络安全性
                </p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 监控告警内容 -->
        <div id="monitor-content" class="feature-content hidden">
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
            <div class="space-y-6">
              <h2 class="text-2xl md:text-3xl font-bold text-primary">实时监控与智能告警</h2>
              <p class="text-gray-600">
                实时监控网络设备状态、流量变化和系统资源，支持自定义告警规则，及时发现和解决网络问题。
              </p>
              <ul class="space-y-3">
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>设备在线状态监控，自动检测设备离线情况</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>网络流量监控，支持实时图表展示和历史数据分析</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>CPU、内存、磁盘使用率监控，预防系统过载</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>自定义告警阈值和告警方式（声音、弹窗）</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>告警历史记录查询和导出，便于问题追溯</span>
                </li>
              </ul>
              <div class="bg-amber-50 p-4 rounded-lg border border-amber-100">
                <p class="text-amber-700 font-medium">
                  <i class="fa fa-bell mr-2"></i>
                  推荐设置关键设备和链路的告警规则，确保第一时间响应故障
                </p>
              </div>
            </div>
            <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100">
              <div class="h-80 bg-gray-50 flex items-center justify-center">
                <div class="text-center">
                  <i class="fa fa-line-chart text-8xl text-primary/70 mb-4"></i>
                  <p class="text-gray-500 text-lg">监控告警示意图</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 系统设置内容 -->
        <div id="system-content" class="feature-content hidden">
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
            <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 order-2 lg:order-1">
              <div class="h-80 bg-gray-50 flex items-center justify-center">
                <div class="text-center">
                  <i class="fa fa-cog text-8xl text-primary/70 mb-4"></i>
                  <p class="text-gray-500 text-lg">系统设置示意图</p>
                </div>
              </div>
            </div>
            <div class="space-y-6 order-1 lg:order-2">
              <h2 class="text-2xl md:text-3xl font-bold text-primary">灵活系统配置</h2>
              <p class="text-gray-600">
                提供丰富的系统设置选项，满足不同用户的个性化需求，确保软件运行在最佳状态。
              </p>
              <ul class="space-y-3">
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>界面主题切换（浅色/深色模式）</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>语言设置，支持多语言切换</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>数据备份与恢复功能，保障数据安全</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>服务端口设置，适应不同网络环境</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
                  <span>自动更新设置，及时获取最新功能和修复</span>
                </li>
              </ul>
              <div class="bg-teal-50 p-4 rounded-lg border border-teal-100">
                <p class="text-teal-700 font-medium">
                  <i class="fa fa-cog mr-2"></i>
                  定期备份系统配置，可在系统异常时快速恢复
                </p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 立即体验按钮 -->
        <div class="text-center mt-12">
          <button id="try-now-btn" class="btn-primary px-8 py-4 rounded-lg font-bold text-lg transition-all duration-300 hover:shadow-xl">
            <i class="fa fa-download mr-2"></i>立即体验所有功能
          </button>
        </div>
      </div>
    </section>
    
  `;
  
  // 创建页脚
  const footer = Footer();
  
  // 组装页面
  featuresPage.appendChild(contentContainer);
  featuresPage.appendChild(footer);
  
  // 添加导航事件监听
  contentContainer.querySelector('#try-now-btn').addEventListener('click', () => navigateTo('/download'));
  
  // 添加选项卡切换功能
  const featureTabs = featuresPage.querySelectorAll('.feature-tab');
  const featureContents = featuresPage.querySelectorAll('.feature-content');
  
  featureTabs.forEach(tab => {
    tab.addEventListener('click', () => {
      const targetTab = tab.getAttribute('data-tab');
      
      // 隐藏所有内容
      featureContents.forEach(content => {
        content.classList.add('hidden');
        content.classList.remove('active');
      });
      
      // 移除所有选项卡的活动状态
      featureTabs.forEach(t => {
        t.classList.remove('active');
      });
      
      // 显示选中的内容和设置选项卡为活动状态
      const activeContent = featuresPage.querySelector(`#${targetTab}-content`);
      activeContent.classList.remove('hidden');
      activeContent.classList.add('active');
      tab.classList.add('active');
    });
  });
  
  return featuresPage;
}

export default Features;